import React, { Component } from 'react'
// 导入路由
import { withRouter } from "react-router-dom"
// 首页搜索框组件
import SearchInput from "../SearchInput/SearchInput"
//5.导入一个redux 连接器(connect) 用于组件注入改变状态的纯函数与组件之间的链接
import { connect } from "react-redux"
//导入请求数据接口
import { getHomeSwiperList, getHomeCatItems, getHomePicList } from '../../api'
// 首页css
import styles from "./Home.module.scss";
/*  引入轮播图组件 */
import { Carousel } from "antd-mobile";
class Home extends Component {
    state = {
        //首页轮播图的数据
        swiperList: [],
        //首页导航栏数据
        catItems: [],
        //图片列表
        picList: []
    }
    // 跳转到商品详情页面
    goToGoodDetail = (goods_id) => {
        this.props.history.push("GoodDetail/" + goods_id);
    }
    // 跳转到分类页面
    goToCategory = (params) => {
        this.props.history.push("Category")
    }
    // 跳转到产品列表
    goToProductList = (params) => {
        this.props.history.push("GoodList?query=" + "服装");
    }
    //在组件挂载之前发起同步axios请求数据接口
    async componentDidMount() {
        // 首页轮播图的数据
        let swiperList = await getHomeSwiperList();
        //首页导航栏数据
        let catItems = await getHomeCatItems();
        let picList = await getHomePicList();
        //改变状态
        this.setState((preState) => {
            return {
                //改变首页轮播图的数据
                swiperList: swiperList.message,
                catItems: catItems.message,
                picList: picList.message
            }
        })
    }

    render() {
        return (<div className={styles.ShoppingHomeCat}>
            {/* 首页标题的开始 */}
            <div className={styles.ShoppingTitle}>
                <span className={styles.title}>京东商城</span>
            </div>
            {/* 首页标题的结束 */}
            {/* 首页搜索框的开始 */}
            <SearchInput title="搜索"></SearchInput>
            {/* 首页搜索框的结束  */}
            {/* 首页轮播组件开始 */}
            {/* 
             autoplay 自动播放
             infinite 无限播放
            */}
            <Carousel autoplay={true} infinite dots={true}>
                {
                    this.state.swiperList.map((val) => (
                        <img
                            key={val.image_src}
                            onClick={this.goToGoodDetail.bind(this, val.goods_id)}
                            src={val.image_src}
                            style={{ width: "100%", verticalAlign: "top" }}
                            onLoad={() => {
                                window.dispatchEvent(new Event("resize"));
                            }} />
                    )
                    )
                }
            </Carousel>
            {/* 首页轮播组件结束 */}
            {/* 首页导航栏开始 */}
            <div className={styles.jdHomeCat}>
                {this.state.catItems.map((v, i) => {
                    return <div
                        onClick={this.goToCategory}
                        className={styles.homeCatItem} key={v.image_src}>
                        <img src={v.image_src} alt="" />
                    </div>
                })
                }
            </div>
            {/* 首页导航栏结束*/}
            {/* 首页的图片列表开始 */}
            <div className={styles.ykHomeList}>
                {
                    this.state.picList.map((v, i) => {
                        return <div className={styles.homeListItem} key={v.floor_title.image_src}>
                            {/* 标题的开始 */}
                            <div className={styles.listItemTitle}>
                                <img src={v.floor_title.image_src} alt="" />
                            </div>
                            {/* 标题的结束 */}
                            {/* 图片列表的开始 */}
                            <div className={styles.listItemPics}>
                                {
                                    v.product_list.map((vv, i) => {
                                        return <div className={styles.picItem} key={vv.image_src} onClick={this.goToProductList}>
                                            <img src={vv.image_src} alt="" />
                                        </div>
                                    })
                                }
                            </div>
                            {/* 图片列表的结束 */}
                        </div>
                    })
                }
            </div>
            {/* 首页的图片列表结束 */}
        </div>)
    }
}
const mapStateToProps = (state) => {
    return {
        title: state.homeReducer.title
    }
}
//将组件注入到路由
export default connect(mapStateToProps,null)(withRouter(Home));